import { getArticles, getNewArticles } from '@/store/actions/article'
import { RootState } from '@/types/store'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ArticleItem from '../ArtivleItem/ArticleItem'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'

import styles from './index.module.scss'

type Props = {
  channelId: string
}

const ArticleList = (props: Props) => {
  const dispatch = useDispatch()
  const { articles = [] } =
    useSelector((state: RootState) => state.article[props.channelId]) || []
  // 上拉刷新,无限加载组件
  const hasMore = articles.length < 50
  const loadMore = async () => {
    await dispatch(getArticles(props.channelId, Date.now()))
    console.log(2222)
  }
  // 下拉刷新
  const onRefresh = async () => {
    // 重置当前频道的数据，重新加载第一页的数据
    await dispatch(getNewArticles(props.channelId, Date.now()))
  }
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      <PullToRefresh onRefresh={onRefresh}>
        {articles.map((item, idx) => (
          <div key={idx} className="article-item">
            <ArticleItem article={item} />
          </div>
        ))}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}

export default ArticleList
